<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="scripts/vue.js"></script>
    <link href="scripts/bootstrap.css" rel="stylesheet" type="text/css">
    <title>xiaomi</title>
    <style>

    </style>
</head>

<body>

    <webview id="webview" class="position-absolute" style="width:100%;height:100%;padding-top: 60px;"
        src="http://tool.liumingye.cn/music"></webview>

    <div class="container-fluid" id="app">
        <nav class="row navbar navbar-expand navbar-dark bg-dark">
            <div class="navbar-collapse">
                <ul class="navbar-nav">
                    <li class="nav-item active">
                        <a class="nav-link" @click="showWebView(true)" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" @click="showWebView(false)" href="#">批量</a>
                    </li>
                </ul>
            </div>
        </nav>
        <div v-show="showGetHistory">
            <div class="custom-file">
                <ul class="list-group mb-1">
                    <li v-for="(item,index) in historyList" class="list-group-item" :class="{'list-group-item-success':item.download===true,'list-group-item-danger':item.download===false}">
                        <div class="d-flex w-100 justify-content-between">
                            <div class="custom-control">
                                <input type="checkbox" v-model="item.selected" />
                                <label class="mb-0">{{index+1}}. {{item.url_flac&&'(F)'}}{{item.name}}</label>
                            </div>
                            <span>{{item.artist}}</span>
                        </div>
                    </li>
                </ul>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">{{selected}}</span>
                        <div class="input-group-text">
                            <input type="checkbox" @change="selectAll">
                        </div>
                    </div>
                    <input type="text" class="form-control" placeholder="专辑名" v-model="album">
                    <div class="input-group-append">
                        <button class="btn btn-primary" type="button" @click="download()">下载</button>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <script>
        let webview = document.getElementById('webview');

        var app = new Vue({
            el: '#app',
            data: function () {
                return {
                    isReady: false,
                    showView: false,
                    cookie: '',
                    showGetHistory:false,
                    album:'',
                    historyList:[]
                }
            },
            created: function () {
                hookSearch((list)=>{this.historyList = list;this.album='';});
            },
            computed:{
                selected(){
                    let t=0;
                    this.historyList.forEach((r)=>{
                        r.selected && t++;
                    });
                    return t;
                }
            },
            methods: {
                showWebView(isShow) {
                    webview.style.display = isShow ? 'inline-flex' : 'none';
                    this.showGetHistory = !isShow;
                    this.showView = isShow;
                },
                selectAll(el){
                    this.historyList.forEach((r)=>{
                        r.selected = el.target.checked;
                    });
                },
                download(){
                    let promises=[];
                    this.historyList.forEach((r)=>{
                        if(r.selected){
                            let p = new Promise((res,rej)=>{
                                downLoad(r, res, rej, this.album);
                            });
                            p.then(()=>this.$forceUpdate());
                            promises.push(p);
                        }
                    });
                    Promise.all(promises).then(() => {
                        alert('完成');
                    });
                }
            }
        });
    </script>
</body>